<template>
  <div class="nav">
    <div class="container">
      <div @mouseleave="leaveIndex" @mouseenter="showNavMenu">
        <h2 class="all">全部商品分类</h2>
        <!-- 三级联动 -->
        <transition name="el-fade-in-linear">
          <div class="sort" v-show="showNav">
            <!-- goSearch 通过事件委托 把子组件的点击事件委托给父级 -->
            <div class="all-sort-list2" @click="goSearch">
              <!-- 一级分类 -->
              <div
                class="item"
                v-for="(LevelOne, index) in navigationMenu"
                :key="LevelOne.LevelOneId"
                :class="{ itemHover: LevelOneIndex == index }"
                @mouseenter="changeIndex(index)"
              >
                <h3>
                  <!-- 点击事件委托给父级 通过:data-name="LevelTwo.LevelTwoeName"自定义属性判断点击的节点 -->
                  <!--  :data-LevelOneId="LevelOne.LevelOneId" 判断点击的对象是 几级分类 -->
                  <a
                    href="javascript:;"
                    :data-name="LevelOne.LevelOneName"
                    :data-LevelOneId="LevelOne.LevelOneId"
                  >
                    {{ LevelOne.LevelOneName }}
                  </a>
                </h3>
                <!-- 通过style 控制 二三级分类盒子是否显示 -->
                <div
                  class="item-list clearfix"
                  :style="{
                    display: LevelOneIndex == index ? 'block' : 'none'
                  }"
                >
                  <!-- 二级分类 -->
                  <div
                    class="subitem"
                    v-for="LevelTwo in LevelOne.LevelTwo"
                    :key="LevelTwo.LevelTwoId"
                  >
                    <dl class="fore">
                      <dt>
                        <a
                          href="javascript:;"
                          :data-name="LevelTwo.LevelTwoeName"
                          :data-LevelTwoId="LevelTwo.LevelTwoId"
                          >{{ LevelTwo.LevelTwoeName }}</a
                        >
                      </dt>
                      <dd>
                        <!-- 三级分类 -->
                        <em
                          v-for="LevelThree in LevelTwo.LevelThree"
                          :key="LevelThree.LevelThreeId"
                        >
                          <a
                            href="javascript:;"
                            :data-name="LevelThree.LevelThreeName"
                            :data-LevelThreeId="LevelThree.LevelThreeId"
                            >{{ LevelThree.LevelThreeName }}</a
                          >
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
    </div>
  </div>
</template>

<script>
// import _ from 'lodash' // 引入节流和防抖 全部引入
import throttle from 'lodash/throttle' // 引入节流 按需引入
// console.log(_)
export default {
  name: 'Nav',
  data() {
    return {
      // 存储用户鼠标移上哪一个一级分类
      LevelOneIndex: -1,
      // 控制三级联动组件是否显示
      showNav: true
    }
  },
  // dom结构渲染完毕生命周期
  mounted() {
    this.changeIndex()
    // search页面 隐藏 三级联动
    if (this.$route.path != '/home') {
      this.showNav = false
    }
  },
  // 计算属性节点
  computed: {
    // 三级联动数据源
    navigationMenu() {
      return this.$store.state.home.navigationMenu
    }
  },
  methods: {
    // 鼠标经过一级分类展示二三级导航
    // 节流 50s内只触发一次
    changeIndex: throttle(function (index) {
      // 控制当前索引的一级分类 显示对应的二三级分类
      this.LevelOneIndex = index
    }, 10),

    // 鼠标离开三级联动大盒子隐藏二三级分类
    leaveIndex() {
      // 在首页中实现隐藏
      this.LevelOneIndex = -1
      // 在search页面中实现隐藏
      if (this.$route.path != '/home') {
        this.showNav = false
      }
    },
    // 鼠标经过全部商品显示三级联动
    showNavMenu() {
      this.showNav = true
    },

    // 该事件通过委托绑定在三级联动的父级

    goSearch(event) {
      // 获取到点击的节点（进行路由跳转的标签） 如果身上带有 :data-name 自定义属性 进行路由的跳转
      // :data-name 和 data-id
      // console.log(event.target)
      // 获取到自定义属性身上的值  {name: xx; id: x}
      console.log(event.target.dataset)

      // name 当前触发点击事件节点的值,leveloneid 一级分类id leveltwoid二级分类id levelthreeid三级分类id
      let { name, leveloneid, leveltwoid, levelthreeid } = event.target.dataset
      console.log(name, leveloneid, leveltwoid, levelthreeid)

      if (name) {
        // 跳转的路由名字
        let loction = { name: 'search' }
        // 点击导航节点的值
        let query = { NavigationName: name }

        if (leveloneid) {
          // 一级分类 id
          if (leveloneid == 2) {
            this.$store.commit('GoodsDetail', true)
          } else {
            this.$store.commit('GoodsDetail', false)
          }
          query.LevelOneID = leveloneid
        } else if (leveltwoid) {
          this.$store.commit('GoodsDetail', false)
          // 二级分类 id
          query.LevelTwoID = leveltwoid
        } else if (levelthreeid) {
          this.$store.commit('GoodsDetail', false)
          // 三级分类 id
          query.LevelThreeID = levelthreeid
        }

        // 保存路由跳转的对象和query查询参数
        loction.query = query

        // 合并 query 和 params 参数(目前搜索框为 params参数) 如果页面中存在params参数，将它保留下来，不清空

        // if (this.$route.params) {
        //   loction.params = this.$route.params
        // }

        // 这里是通过vuex重新传参，目的是为了每次点击导航时都应该清空商品的分类属性
        // 不让其保留上一次的商品分类属性 info值
        this.$store.commit('Goodsinfo', { id: 0, val: '' })
        this.$router.push(loction)

        // 点击导航后 清空商品的筛选属性
        this.$emit('sifting', 0)

        //   点击导航后 数据分页 重新回到 1
        // 这里逻辑有点复杂 我看京东的官网就是这样做： 假如当前为第三页  在路由不变的情况下，重复点击相同的导航会一直处于第三页，
        // 这样是不行的，无论是路由发生变化还是重复点击导航商品的分页都应该重置  要重新变为 初始值 1
        // 首先vuex不行，因为无法监听 state数据源 我是这样的，
        // 1. 点击导航后 通过自定义事件 告诉 search（带有分页器的组件） 组件 currentPage 的值变为 1
        //    然后 pagination 数据分页组件 通过 props属性 双向绑定 search组件的 currentPage 值
        //    然后监听  watch: {currentPage(newValue, oldValue) {} }   这里的监听对象一定要是 props:['currentPage']初始值
        //    不能是 data: return {currentPage: this.currentPage} 这个返回值
        // 2.  通过自定义事件把 点击数据分页的页数 赋值给 search组件的  currentPage 值 目的是 点击分页后再一次触发数据变化，从而触发事件
        // 3. 重新发送请求，将最新的页数发送给服务端

        this.$emit('changeCurrentPage', 1)
      }
    }
  }
}
</script>

<style scoped lang="less">
.nav {
  border-bottom: 2px solid #e1251b;

  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;

    .all {
      width: 210px;
      height: 45px;
      background-color: #e1251b;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }

    .nav {
      a {
        height: 45px;
        margin: 0 22px;
        line-height: 45px;
        font-size: 16px;
        color: #333;
      }
    }

    .sort {
      position: absolute;
      left: 0;
      top: 45px;
      width: 210px;
      height: 461px;
      position: absolute;
      background: #fafafa;
      z-index: 999;

      .all-sort-list2 {
        .item {
          h3 {
            line-height: 30px;
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            padding: 0 20px;
            margin: 0;

            a {
              color: #333;
            }
          }

          .item-list {
            display: none;
            position: absolute;
            width: 734px;
            min-height: 460px;
            background: #f7f7f7;
            left: 210px;
            border: 1px solid #ddd;
            top: 0;
            z-index: 9999 !important;

            .subitem {
              float: left;
              width: 650px;
              padding: 0 4px 0 8px;

              dl {
                border-top: 1px solid #eee;
                padding: 6px 0;
                overflow: hidden;
                zoom: 1;

                &.fore {
                  border-top: 0;
                }

                dt {
                  float: left;
                  width: 54px;
                  line-height: 22px;
                  text-align: right;
                  padding: 3px 6px 0 0;
                  font-weight: 700;
                }

                dd {
                  float: left;
                  width: 415px;
                  padding: 3px 0 0;
                  overflow: hidden;

                  em {
                    float: left;
                    height: 14px;
                    line-height: 14px;
                    padding: 0 8px;
                    margin-top: 5px;
                    border-left: 1px solid #ccc;
                  }
                }
              }
            }
          }
        }

        .itemHover {
          background: rgb(227, 242, 205);
        }
      }
    }
  }
}
</style>
